<template>
  <van-nav-bar
    title="眼位"
    left-text="返回"
    left-arrow
    @click-left="handleToBack"
    fixed
    placeholder
  />
  <div class="u-m-t-10 u-flex-col u-col-center">
    <span class="u-font-14 u-m-b-10">侦察守卫</span>
    <HeatChart id="obsChart" :data="obsData"></HeatChart>
  </div>
  <div class="u-m-t-10 u-m-b-10 u-flex-col u-col-center">
    <span class="u-font-14 u-m-b-10">哨岗守卫</span>
    <HeatChart id="senChart" :data="senData"></HeatChart>
  </div>
</template>
<script setup>
import HeatChart from '@/components/Echarts/HeatChart/index'
import { getPlayerWardmap } from '@/api/player'
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const obsData = ref([])
const senData = ref([])
onMounted(() => {
  getPlayerWardmap(route.params.account_id).then((res) => {
    const obsList = []
    for (const [fKey, fValue] of Object.entries(res.obs)) {
      for (const [cKey, cValue] of Object.entries(fValue)) {
        obsList.push({
          x: Number(fKey),
          y: Number(cKey),
          value: Number(cValue),
        })
      }
    }
    obsData.value = obsList
    const senList = []
    for (const [fKey, fValue] of Object.entries(res.sen)) {
      for (const [cKey, cValue] of Object.entries(fValue)) {
        senList.push({
          x: Number(fKey),
          y: Number(cKey),
          value: Number(cValue),
        })
      }
    }
    senData.value = senList
  })
})
const handleToBack = () => {
  router.back()
}
</script>